<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="6">
        <div class="statistics" style="background:#409eff">
          <div class="title">
            <p>用户统计</p>
            <el-tag size="mini" type="success">实时</el-tag>
          </div>
          <div class="num">用户数量:{{ userNumber }}</div>
          <button class="tip">当前总用户数量</button>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="statistics" style="background:#E6A23C">
          <div class="title">
            <p>车辆进出记录</p>
            <el-tag size="mini" type="info">实时</el-tag>
          </div>
          <div class="num">今日记录:{{ DayHistory }}</div>
          <button @click="openCar()" class="tip">本周车辆进出记录</button>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="statistics" style="background:#67C23A">
          <div class="title">
            <p>收入统计</p>
            <el-tag size="mini" type="warning">实时</el-tag>
          </div>
          <div class="num">本月收入:{{ price }}</div>
          <button @click="openPrice()" class="tip">最近三个月收入</button>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="statistics" style="background:#909399">
          <div class="title">
            <p>当月申诉</p>
            <el-tag size="mini" type="primary">实时</el-tag>
          </div>
          <div class="num">本月申述:{{ allega }}</div>
          <button @click="openAllega()" class="tip">申述处理</button>
        </div>
      </el-col>
    </el-row>

    <div v-if="dialogFormVisible" id="myChart"></div>

    <div v-if="open" id="Chart"></div>

    <div v-if="open1" id="Chart1"></div>
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'LineChart',
  data() {
    return {
      open: false,
      open1:false,
      dialogFormVisible: false,
      userNumber: '',
      DayHistory: '',
      price: '',
      allega: '',
      outlist: [],
      echartsOption: {	// echarts选项，所有绘图数据和样式都在这里设置
        legend: {	//图表上方的图例
          data: ['车辆进出']
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],   // x轴数据
          name: '日期',   // x轴名称
          nameTextStyle: {	// x轴名称样式
            fontWeight: 600,
            fontSize: 18
          }
        },
        yAxis: {
          type: 'value',
          name: '记录',   // y轴名称
          nameTextStyle: {	// y轴名称样式
            fontWeight: 600,
            fontSize: 18
          }
        },
        tooltip: {   //鼠标放到图上的数据展示样式
          trigger: 'axis'
        },
        series: [{
          name: '车辆进出',
          data: [],
          type: 'line'
        }],
      },

      echartsOptionNumber1: {	// echarts选项，所有绘图数据和样式都在这里设置
        xAxis: {
          type: 'category',
          data: ['上两月', '上一月', '本月'],   // x轴数据
          name: '日期',   // x轴名称
          nameTextStyle: {	// x轴名称样式
            fontWeight: 600,
            fontSize: 18
          }
        },
        yAxis: {
          type: 'value',
          name: '停车收入',   // y轴名称
          nameTextStyle: {	// y轴名称样式
            fontWeight: 600,
            fontSize: 18
          }
        },
        tooltip: {   //鼠标放到图上的数据展示样式
          trigger: 'axis'
        },
        series: [{  //series中加入每个bar的数据
          name: '停车收入',
          type: 'bar',
          barWidth: '60%',
          data: [],
        }],
      },

      echartsOptionNumber2: {	// echarts选项，所有绘图数据和样式都在这里设置
        legend: {	//图表上方的图例
          data: ['已处理', '未处理']
        },
        tooltip: {   //鼠标放到图上的数据展示样式
          trigger: 'axis'
        },
        series: [{
          name: '公司市值占比',
          type: 'pie',
          barWidth: '60%',
          data: [	// 扇形图数据格式： {value, name}
            {value: '', name: '已处理'},		// value不一定是比例，echarts会自动转换
            {value: '', name: '未处理'},

          ],
        }],
      }

    };
  },

  methods: {
    openCar() {
      this.open1=false
      this.open = false
      this.dialogFormVisible = true
      this.getWeekend()
    },
    openPrice() {
      this.open1=false
      this.dialogFormVisible = false
      this.open = true
      this.getPrice()
    },
    openAllega(){
      this.dialogFormVisible = false
      this.open = false
      this.open1=true
      this.getGroupAllega()
    },
    getGroupAllega() {
      let url = 'http://localhost:8080/allega/groupAllega'
      this.axios.get(url).then((response) => {
        let responseBody = response.data
        if (responseBody.code == 200) {
          console.log(responseBody.data)
          this.echartsOptionNumber2.series[0].data[0].value = responseBody.data[0]
          this.echartsOptionNumber2.series[0].data[1].value = responseBody.data[1]
        }
        let Chart1 = echarts.init(document.getElementById('Chart1'), 'light')	// 初始化echarts, theme为light
        Chart1.setOption(this.echartsOptionNumber2)	// echarts设置选项
      });
    },
    getPrice() {
      let url = 'http://localhost:8080/car/orderPrice'
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data
        if (responseBody.code == 200) {
          this.echartsOptionNumber1.series[0].data = responseBody.data
          console.log(this.echartsOptionNumber1.series[0].data)
        }
        let Chart = echarts.init(document.getElementById('Chart'), 'light')	// 初始化echarts, theme为light
        Chart.setOption(this.echartsOptionNumber1)	// echarts设置选项
      });

    },
    getWeekend() {
      let url = 'http://localhost:8080/car/weekend'
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data
        if (responseBody.code == 200) {
          this.echartsOption.series[0].data = responseBody.data
          console.log(this.echartsOption.series[0].data)
        }
        let myChart = echarts.init(document.getElementById('myChart'), 'light')	// 初始化echarts, theme为light
        myChart.setOption(this.echartsOption)	// echarts设置选项
      });

    },
    getUserNumber() {
      let url = 'http://localhost:8080/user/getUserNumber'
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data
        if (responseBody.code = 200) {
          this.userNumber = responseBody.data;
        }
      });
    },
    getCarHistory() {
      let url = 'http://localhost:8080/car/getDayHistory'
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data
        if (responseBody.code = 200) {
          this.DayHistory = responseBody.data;
        }
      });
    },
    getMonthPrice() {
      let url = 'http://localhost:8080/car/getMonthPrice'
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data
        if (responseBody.code = 200) {
          this.price = responseBody.data;
        }
      });
    },
    getAllega() {
      let url = 'http://localhost:8080/allega/getHistory'
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data
        if (responseBody.code = 200) {
          this.allega = responseBody.data;
        }
      });
    },


  },
  created() {
    this.getUserNumber()
    this.getCarHistory()
    this.getMonthPrice()
    this.getAllega()
  }
}
</script>

<style lang="less" scoped>
#Chart1 {
  width: 100%;
  height: 500px;
  margin: 0 auto;
  margin-top: 5%;
}

#Chart {
  width: 100%;
  height: 500px;
  margin: 0 auto;
  margin-top: 5%;
}

#myChart {
  width: 100%;
  height: 500px;
  margin: 0 auto;
  margin-top: 5%;
}

.el-row {
  padding: 0 9px;

  .statistics {
    color: white;
    height: 100px;
    border-radius: 4px;
    padding: 0 8px;

    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;

    }

    p {
      font-size: 13px;
      font-weight: bold;
    }

    .num {
      font-size: 20px;
      font-weight: bold;
      text-align: center;
    }

    .tip {
      font-size: 12px;
    }

  }
}


</style>